<script setup lang="ts">
import { get, loadFile, message, post } from '@/utils'
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
const emit = defineEmits(['update:show', 'reset', 'confirm', 'cancel', 'update:list'])
const props = defineProps<{
  show: boolean
  type?: 'radio' | 'checkbox'
  ids?: any[] | string
}>()

const { store } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({})
const formRef = ref()
const actionRef = ref()
const rowSelection = reactive({})
const radioDefault = () => ({
  type: 'radio',
})
const chekboxDefault = () => {
  return {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: true,
  }
}
const selectedKeys = ref<any[]>([])

const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const list = ref<any[]>([])
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-user/admin/user/page',
        data: query,
      },
      ({ data, code }) => {
        list.value = data.records
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}

const submit = () => {
  const _list = list.value.filter(f => selectedKeys.value.some(v => v == f.id))
  console.log('🚀 ~ submit ~ list:', list)
  console.log('🚀 ~ submit ~ _list:', _list)
  emit('confirm', _list[0])
  emit('update:list', _list)
  emit('update:show', false)
  emit('cancel')
}
const columns = formatColumns([
  { title: '用户Id', dataIndex: 'id' },
  { title: '用户头像', dataIndex: 'avatar', valueType: 'image' },
  { title: '用户昵称', dataIndex: 'nickName', hideInSearch: false },
  { title: '用户生日', dataIndex: 'birthday' },
  { title: '手机号码', dataIndex: 'mobile', hideInSearch: false },
  { title: '余额', dataIndex: 'money' },
  { title: '充值金额', dataIndex: 'moneyTotal' },
  { title: '创建时间', dataIndex: 'createTime' },
])
onMounted(() => {
  console.log(props.type)
  if (props.type == 'radio') {
    Object.assign(rowSelection, radioDefault())
    console.log('🚀 ~ file: Account.vue:74 ~ onMounted ~ rowSelection:', rowSelection)
  } else if (props.type == 'checkbox') {
    Object.assign(rowSelection, chekboxDefault())
  }
  if (typeof props.ids == 'string') {
    selectedKeys.value = props.ids.split(',')
  } else if (props.ids instanceof Array) {
    selectedKeys.value = props.ids
  }
})
</script>

<template>
  <CModal v-model:visible="props.show" @ok="submit" :mask-closable="false" width="1300px" title="用户列表" @cancel="emit('update:show', false)">
    <ProTable
      :columns="columns"
      :request="request"
      row-key="id"
      :form-ref="ref => (formRef = ref)"
      :pagination="pagination"
      header-title=""
      :scroll="{ x: 1000 }"
      column-resizable
      :params="searchQuery"
      :bordered="{ cell: true }"
      :action-ref="ref => (actionRef = ref)"
      :row-selection="rowSelection"
      v-model:selectedKeys="selectedKeys"
    >
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
    </ProTable>
  </CModal>
</template>
